<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jQuery/jquery-3.7.1.min.js"></script>
</head>
<body>
    
</body>
<script>
    //promise 初衷：解决回调地狱问题：回调函数的层层嵌套
</script>
<script>
    //promise 对象里面的then方法是异步的
    //new Promise(回调函数(resolve,reject))
    let pro = new Promise((resolve,reject) => {
       console.log(resolve);
       console.log(reject);
    //    resolve("成功");
    //    reject("失败"); 
   
    $.ajax({
        url: "https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5",
        type: "get",
        success:(res) => {
            console.log(res);
        },
        error:(err) => {
           reject(789); 
        }
    })
})
    /*
    promise 状态：
    1、pending 等待状态  初始状态
    2、fullfilled 成功状态  调用resolve 方法 .then
    3、rejected 失败状态  调用reject 方法  .catch
     初始状态===》成功状态    初始状态===》失败状态
    */
    console.log(pro);
 
    function fn1(x) {
     return new Promise((resolve,reject) => {
        $.ajax({
           url:"",
           type:"",
           contentType:"",
               data:{ x },
           success:(res) => {
            resolve(456);
           }, 
           error:() => {
            reject(789); 
           }
        })
     })
    }


    //成功执行
    //下一个then方法的参数是上一个then方法的返回值
    pro.then((res) => {
        console.log(res);
        return res.data[0].id;  
    })
    .then((res1) => {
        console.log(res1);
        return "返回值" ;
    })
   .then((res2) => {
        console.log(res2);
    }) 
    .catch((res) => {
        console.log(res); 
    })
     //失败的执行
    //  pro.then((res) => {
    //     console.log(res);
    //  })

</script>
</html>